<!DOCTYPE html>
<html>
	<head>
		<tal:block metal:use-macro="../macros.tpl.php/headScripts" />
		<script type="text/javascript">
			jQuery(function($) {
				// on select of team fill the group
			    $(document).on('change', 'select[name=teamId]', function() {
			        $this = $(this);
			        var teamId = $this.val();
			        if( teamId == '' || teamId == 0 ){
			        	document.location = '/admin/groups/';
			        }else{
				        document.location = '/admin/groups/nv/tid/' + teamId + '/';
			        }
			    });
			});
		</script>
	</head>
	<body>
		<div id='container'>
			<h1>${title}</h1>
			<tal:block tal:condition="exists: group">
				<table align="center">
					<thead>
						<tr align="center">
							<th colspan="3">${group/name} - Group</th>
						</tr>
						<tr>
							<th>Name</th>
							<th>Status</th>
						</tr>
					</thead>
					<tbody>
						<tal:block>
							<tr tal:repeat="member group/members">
								<td>${member/name}</td>
								<td>${member/status}</td>
							</tr>
						</tal:block>
					</tbody>
				</table>
				<p></p>
			</tal:block>

			<table align="center">
				<thead>
					<tr>
						<th>Select Team : </th>
						<th colspan="3">
							<select name="teamId">
								<option value="">Select</option>
								<option tal:repeat="team teams" tal:attributes="value team/id;selected team/selected">${team/name}</option>										
							</select>
						</th>
					</tr>
					<tr tal:condition="groups">
						<th>Group Name</th>
						<th>Description</th>
						<th>Status</th>
						<th>Total Members</th>
					</tr>
				</thead>
				<tbody>
					<tal:block tal:condition="groups">
						<tr tal:repeat="group groups">
							<td><a href="${group/link}">${group/name}</a></td>
							<td>${group/desc}</td>
							<td>${group/status}</td>
							<td>${group/members}</td>
						</tr>
					</tal:block>
				</tbody>
			</table>

		</div>
	</body>
</html>
